<template>
  <div class="order-detail-step">
    <div
      v-for="(item,index) in stepList"
      :class="{'finish': active > item.id, 'active': active === item.id}"
      :key="item.id"
      class="step-item">
      <div class="inner">
        <div v-if="active > item.id" class="index">
          <img :src="correct" alt="">
          <!-- <span class="el-icon-check"/> -->
        </div>
        <div v-else class="index">{{ index + 1 }}</div>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import correct from '@/assets/orderlist/correct.png';
export default {
  name: 'SimpleStep',
  props: {
    active: {
      type: Number,
      default: () => null
    },
    stepList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      correct
    };
  }
};
</script>
<style lang="scss" scoped>
.order-detail-step {
  display: flex;
  align-items: center;
  // margin:0 24px;
  margin-top: 24px;
  height: 36px;
  background-color: transparent;
  border-radius: 4px;
  overflow: hidden;
  .inner {
    .index {
      width: 18px;
      height: 18px;
      border: 2px solid #406EFF;
      font-size: 14px;
      font-weight:900;
      color: #406EFF;
      border-radius: 100%;
      margin-right: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .name {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #406EFF;
      line-height: 16px;
    }
  }
  .step-item::after, .inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    height: 0;
    width: 0;
    border: 18px solid transparent;
    border-right-width: 0;
    border-left-width: 16px;
  }
  .step-item {
    flex:1;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    position: relative;
    background-color: #E6EDFF;
    margin-right: 6px;
    &::after {
      z-index: 1;
      transform: translateX(6px);
      border-left-color: #fff;
      margin: 0;
    }
    .inner {
      display: flex;
      align-items: center;
      height: 100%;
      width: 100%;
      justify-content: center;
      color: #333;
      &::after {
        z-index: 2;
        border-left-color: #E6EDFF;
      }
    }
    &:last-child {
      margin-right: 0;
      &::after {
        display: none;
      }
      .inner::after {
        display: none;
      }
    }
    &.finish, &.active {
      background-color: #406EFF;
      .inner {
        .index {
          border-color: #fff;
          color: #fff;
        }
        img {
          width: 12px;
          color: #fff;
        }
        .name {
          color: #fff;
        }
        &::after {
          border-left-color: #406EFF;
        }
      }
    }
    &.disable {
      background-color: #E6EDFF;
      cursor: not-allowed !important;
      .inner {
        .index {
          border-color: #406EFF;
          color: #406EFF;
        }
        img {
          width: 12px;
          color: #406EFF;
        }
        .name {
          color: #406EFF;
        }
        &::after {
          border-left-color: #E6EDFF;
        }
      }
    }
  }
}
</style>
